<template>
  <div class="fl">
    <div class="topp">
      <div class="back" @click="back()">
        <i></i>
      </div>
      <div class="center">分类</div>
      <div class="seach" @click="seach()">
        <i></i>
      </div>
    </div>
    <div class="const">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from 'qs'
export default {
  data() {
    return {
      num: 0,
      list: "" || JSON.parse(localStorage.getItem("fl")),
      data: {
        client_id: 180100031051,
        channel_id: "",
        webp: 1,
      },
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    seach(){
          this.$router.push('/seach')
    }
  },
  mounted() {},
  created() {
    var dataObj = qs.stringify(this.data);
    axios({
      method: "post",
      url: "api/v1/home/category_v2",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      data: dataObj,
    }).then((res) => {
      // this.list=res.data
      console.log(res);
      this.$store.commit("addfl", res.data);
      var li = localStorage.getItem("fl");
      if (li == undefined) {
        localStorage.setItem("fl", JSON.stringify(res.data));
      } else {
        this.list = JSON.parse(li);
        //  console.log(this.list);
      }
    });
  },
};
</script>
<style scope>
.fl {
  height: 100vh;
  width: 100vw;
  /* background: blue; */
  z-index: 99999;
}
.topp {
  width: 100vw;
  height: 8vh;
  display: flex;
  background: #f2f2f2;
  flex-direction: row;
  position: relative;
}
.topp .center {
  height: 8vh;
  flex: 1;
  text-align: center;
  line-height: 8vh;
  font-size: 3vh;
}

.topp .back,
.seach {
  width: 12vw;
  background: #f2f2f2;
  height: 8vh;
  position: absolute;
}
.topp .back{
    left: 0;
}
.topp .seach{
    right: 0;
}
.topp .back i {
  width: 9vw;
  height: 4vh;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
  margin-left: -4.5vw;
  margin-top: -2vh;
  /* background: #f2f2f2; */
  display: block;
  background-image: url();

  background-repeat: no-repeat;
  background-size: 4vh;
  float: right;
}
.topp .seach i {
  width: 9vw;
  height: 4vh;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
  margin-left: -5vh;
  margin-top: -2vh;
  /* background: #f2f2f2; */
  display: block;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 5vh;
  float: right;
}
.const {
  position: absolute;
  top: 8vh;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #000;
}
.const .left {
  width: 25vw;
  background: red;
  height: 92vh;
}
.const .right {
  width: 75vw;
  background: blue;
  overflow: auto;
  height: 92vh;
}
</style>